<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link href="${pageContext.request.contextPath}/css/myorder.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/js/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.form.js"></script>
</head>
<body>
<div>
    ${orders}
</div>

<!--==================头部导航======================-->
<div class="nav">
    <div class="head-logo">
        <a href="" ></a>
    </div>
    <div class="head-nav">
        <ul>
            <li><a href="${pageContext.request.contextPath}/index" class="first-item">首页</a> </li>
            <li><a href="">手机端</a> </li>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">成为房东</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/house_owner/houseadd.jsp">成为房东</a> </li>
            </c:if>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">房源订单中心</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/index/order">房源订单中心</a> </li>
            </c:if>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">个人中心</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/index/personalCenter">个人中心</a> </li>
            </c:if>
            <li><a href="">帮助</a> </li>
        </ul>
    </div>
    <div class="head-login">
        <c:if test="${empty loginCustomer}">
            <a href="${pageContext.request.contextPath}/users/login.jsp">
                <img class="login-logo" src="${pageContext.request.contextPath}/image/login-logo.svg"/>
                <span class="login-title">登录</span>
            </a>
            <a href="">
                <img class="regist-logo" src="${pageContext.request.contextPath}/image/regist-logo.svg" >
                <span class="login-title">注册</span>
            </a>
        </c:if>
        <c:if test="${!empty loginCustomer}">
            欢迎${loginCustomer.cusNickname}登录，<a href="${pageContext.request.contextPath}/logout">退出</a>
        </c:if>
    </div>
</div>
<!--=====================main==========================-->
<div class="main">
    <div class="main-left">
        <ul>
            <li class="headimg"><img src="${pageContext.request.contextPath}/image/order_head.jpg"></li>
        </ul>
        <div class="customer-info">
            <h4>用户信息</h4>
            <ul>
                <li><span><img src="${pageContext.request.contextPath}/image/order-vip.svg"></span><a href="${pageContext.request.contextPath}/vip/${loginCustomer.cusId}">我的会员</a></li>
                <li><span><img src="${pageContext.request.contextPath}/image/order-userinfo.svg"></span><a href="${pageContext.request.contextPath}/index/personalCenter">个人信息</a></li>
                <li><span><img src="${pageContext.request.contextPath}/image/order-coupon.svg"></span><a href="${pageContext.request.contextPath}/coupon/coupon/${loginCustomer.cusId}/0">我的优惠劵</a></li>
                <li><span><img src="${pageContext.request.contextPath}/image/order-news.svg"></span><a href="">消息提醒</a></li>
            </ul>
        </div>
    </div>
    <div class="main-right">
            <div id="order_info" class="layui-tab order-form">
                <ul id="order-topic" class="layui-tab-title ">
                    <li class="layui-this" id="firstpage">全部订单</li>
                    <li id="secondpage">已付款订单</li>
                    <li id="thirdpage">未付款订单</li>
                    <li id="fourpage">已完成订单</li>
                    <li id="fivepage">已取消订单</li>
                </ul>
                <div class="layui-tab-content coupon-context">
                    <div id="first-item" class="layui-tab-item layui-show">
                        <table cellpadding="0" cellspacing="0">  <%--===============================全部订单=====================================--%>
                            <!--===========================表的属性===========================-->
                            <tr>
                                <td class="house-info">房间</td>
                                <td class="order-id">订单编号</td>
                                <td class="order-price">订单价格</td>
                                <td class="order-time">时间</td>
                                <td class="order-state">订单状态</td>
                                <td class="order-teleno">房东电话</td>
                                <td class="order-opera">操作</td>
                            </tr>


                            <!--===========================表的内容==============================-->
                            <div>
                                <c:forEach var="orderAndHotel" items="${orderAndHotelInfo.data}">
                                    <tr class="form-main">
                                        <td class="house-info1">
                                            <a href="" class="order-house-img"><img src="${orderAndHotel.hotel.hotelPicture1}"></a>
                                            <p>房间编号:${orderAndHotel.hotel.hotelId}</p>
                                            <a href="" class="">${orderAndHotel.hotel.hotelName}</a>
                                            <p> ${orderAndHotel.hotel.hotelType}</p>
                                        </td>
                                        <td class="order-id1">${orderAndHotel.myorder.orderNumber}</td>
                                        <td class="order-price1">
                                            <p>房价：￥${orderAndHotel.hotel.hotelPrice}</p>
                                            <p>入住天数：2</p>
                                            <script>

                                            </script>
                                            <p>已优惠：￥0.00</p>
                                            <p>实 付：￥${orderAndHotel.hotel.hotelPrice*2}</p>
                                        </td>
                                        <td class="order-time1">
                                            <p>入住时间：</p>
                                            <p><fmt:formatDate value="${orderAndHotel.myorder.orderStartDate}" pattern="yyyy-MM-dd"/></p>
                                            <p>退房时间：</p>
                                            <p><fmt:formatDate value="${orderAndHotel.myorder.orderEndDate}" pattern="yyyy-MM-dd"/></p>
                                        </td>
                                        <td class="order-state1">
                                            <p>已付款</p>
                                            <p>【待入住】</p>
                                        </td>
                                        <td class="order-teleno1">${orderAndHotel.myorder.hotelTelno}</td>
                                        <td class="order-opera1">
                                            <p><a href="">再次订房>></a> </p>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </div>


                        </table>
                    </div>
                    <div id="second-item" class="layui-tab-item">  <%--===============================已付款订单======================================--%>
                        <table cellpadding="0" cellspacing="0">
                            <!--===========================表的属性===========================-->
                            <tr>
                                <td class="house-info">房间</td>
                                <td class="order-id">订单编号</td>
                                <td class="order-price">订单价格</td>
                                <td class="order-time">时间</td>
                                <td class="order-state">订单状态</td>
                                <td class="order-teleno">房东电话</td>
                                <td class="order-opera">操作</td>
                            </tr>

                            <!--===========================表的内容==============================-->
                            <div>
                                <c:forEach var="orderAndHotel" items="${orderAndHotelInfo.data}">
                                    <c:if test="${orderAndHotel.myorder.orderStatus >= 2}">
                                    <tr class="form-main">
                                        <td class="house-info1">
                                            <a href="" class="order-house-img"><img src="${orderAndHotel.hotel.hotelPicture1}"></a>
                                            <p>房间编号:${orderAndHotel.hotel.hotelId}</p>
                                            <a href="" class="">${orderAndHotel.hotel.hotelName}</a>
                                            <p> ${orderAndHotel.hotel.hotelType}</p>
                                        </td>
                                        <td class="order-id1">${orderAndHotel.myorder.orderNumber}</td>
                                        <td class="order-price1">
                                            <p>房价：￥${orderAndHotel.hotel.hotelPrice}</p>
                                            <p>入住天数：2</p>
                                            <script>

                                            </script>
                                            <p>已优惠：￥0.00</p>
                                            <p>实 付：￥${orderAndHotel.hotel.hotelPrice*2}</p>
                                        </td>
                                        <td class="order-time1">
                                            <p>入住时间：</p>
                                            <p><fmt:formatDate value="${orderAndHotel.myorder.orderStartDate}" pattern="yyyy-MM-dd"/></p>
                                            <p>退房时间：</p>
                                            <p><fmt:formatDate value="${orderAndHotel.myorder.orderEndDate}" pattern="yyyy-MM-dd"/></p>
                                        </td>
                                        <td class="order-state1">
                                            <p>已付款</p>
                                            <p>【待入住】</p>
                                        </td>
                                        <td class="order-teleno1">${orderAndHotel.myorder.hotelTelno}</td>
                                        <td class="order-opera1">
                                            <p><a href="">添加评论>></a> </p>
                                        </td>
                                    </tr>
                                    </c:if>
                                </c:forEach>
                            </div>


                        </table>
                    </div>
                    <div id="third-item" class="layui-tab-item">  <%--==============================未付款订单====================--%>
                        <table cellpadding="0" cellspacing="0">
                            <!--===========================表的属性===========================-->
                            <tr>
                                <td class="house-info">房间</td>
                                <td class="order-id">订单编号</td>
                                <td class="order-price">订单价格</td>
                                <td class="order-time">时间</td>
                                <td class="order-state">订单状态</td>
                                <td class="order-teleno">房东电话</td>
                                <td class="order-opera">操作</td>
                            </tr>

                            <!--===========================表的内容==============================-->
                            <div>
                                <c:forEach var="orderAndHotel" items="${orderAndHotelInfo.data}">
                                    <c:if test="${orderAndHotel.myorder.orderStatus == 1}">
                                        <tr class="form-main">
                                            <td class="house-info1">
                                                <a href="" class="order-house-img"><img src="${pageContext.request.contextPath}/image/order_house1.jpg"></a>
                                                <p>房间编号:${orderAndHotel.hotel.hotelId}</p>
                                                <a href="" class="">${orderAndHotel.hotel.hotelName}</a>
                                                <p> ${orderAndHotel.hotel.hotelType}</p>
                                            </td>
                                            <td class="order-id1">${orderAndHotel.myorder.orderNumber}</td>
                                            <td class="order-price1">
                                                <p>房价：￥${orderAndHotel.hotel.hotelPrice}</p>
                                                <p>入住天数：2</p>
                                                <script>

                                                </script>
                                                <p>已优惠：￥0.00</p>
                                                <p>实 付：￥${orderAndHotel.hotel.hotelPrice*2}</p>
                                            </td>
                                            <td class="order-time1">
                                                <p>入住时间：</p>
                                                <p><fmt:formatDate value="${orderAndHotel.myorder.orderStartDate}" pattern="yyyy-MM-dd"/></p>
                                                <p>退房时间：</p>
                                                <p><fmt:formatDate value="${orderAndHotel.myorder.orderEndDate}" pattern="yyyy-MM-dd"/></p>
                                            </td>
                                            <td class="order-state1">
                                                <p>已付款</p>
                                                <p>【待入住】</p>
                                            </td>
                                            <td class="order-teleno1">${orderAndHotel.myorder.hotelTelno}</td>
                                            <td class="order-opera1">
                                                <p><a href="">前往付款>></a> </p>
                                            </td>
                                        </tr>
                                    </c:if>
                                </c:forEach>
                            </div>


                        </table>
                    </div>
                    <div id="four-item" class="layui-tab-item">   <%--========================================已完成订单====================================--%>
                        <table cellpadding="0" cellspacing="0">
                            <!--===========================表的属性===========================-->
                            <tr>
                                <td class="house-info">房间</td>
                                <td class="order-id">订单编号</td>
                                <td class="order-price">订单价格</td>
                                <td class="order-time">时间</td>
                                <td class="order-state">订单状态</td>
                                <td class="order-teleno">房东电话</td>
                                <td class="order-opera">操作</td>
                            </tr>

                            <!--===========================表的内容==============================-->
                            <div>
                                <c:forEach var="orderAndHotel" items="${orderAndHotelInfo.data}">
                                    <c:if test="${orderAndHotel.myorder.orderStatus == 3}">
                                        <tr class="form-main">
                                            <td class="house-info1">
                                                <a href="" class="order-house-img"><img src="${pageContext.request.contextPath}/image/order_house1.jpg"></a>
                                                <p>房间编号:${orderAndHotel.hotel.hotelId}</p>
                                                <a href="" class="">${orderAndHotel.hotel.hotelName}</a>
                                                <p> ${orderAndHotel.hotel.hotelType}</p>
                                            </td>
                                            <td class="order-id1">${orderAndHotel.myorder.orderNumber}</td>
                                            <td class="order-price1">
                                                <p>房价：￥${orderAndHotel.hotel.hotelPrice}</p>
                                                <p>入住天数：2</p>
                                                <script>

                                                </script>
                                                <p>已优惠：￥0.00</p>
                                                <p>实 付：￥${orderAndHotel.hotel.hotelPrice*2}</p>
                                            </td>
                                            <td class="order-time1">
                                                <p>入住时间：</p>
                                                <p><fmt:formatDate value="${orderAndHotel.myorder.orderStartDate}" pattern="yyyy-MM-dd"/></p>
                                                <p>退房时间：</p>
                                                <p><fmt:formatDate value="${orderAndHotel.myorder.orderEndDate}" pattern="yyyy-MM-dd"/></p>
                                            </td>
                                            <td class="order-state1">
                                                <p>已付款</p>
                                                <p>【待入住】</p>
                                            </td>
                                            <td class="order-teleno1">${orderAndHotel.myorder.hotelTelno}</td>
                                            <td class="order-opera1">
                                                <p><a href="">添加评论>></a> </p>
                                            </td>
                                        </tr>
                                    </c:if>
                                </c:forEach>
                            </div>


                        </table>
                    </div>
                    <div id="five-item" class="layui-tab-item">  <%--=================================已取消订单=========================--%>
                        <table cellpadding="0" cellspacing="0">
                            <!--===========================表的属性===========================-->
                            <tr>
                                <td class="house-info">房间</td>
                                <td class="order-id">订单编号</td>
                                <td class="order-price">订单价格</td>
                                <td class="order-time">时间</td>
                                <td class="order-state">订单状态</td>
                                <td class="order-teleno">房东电话</td>
                                <td class="order-opera">操作</td>
                            </tr>
                            <!--===========================表的内容==============================-->
                            <div>
                                <c:forEach var="orderAndHotel" items="${orderAndHotelInfo.data}">
                                    <c:if test="${orderAndHotel.myorder.orderStatus == 0}">
                                        <tr class="form-main">
                                            <td class="house-info1">
                                                <a href="" class="order-house-img"><img src="${pageContext.request.contextPath}/image/order_house1.jpg"></a>
                                                <p>房间编号:${orderAndHotel.hotel.hotelId}</p>
                                                <a href="" class="">${orderAndHotel.hotel.hotelName}</a>
                                                <p> ${orderAndHotel.hotel.hotelType}</p>
                                            </td>
                                            <td class="order-id1">${orderAndHotel.myorder.orderNumber}</td>
                                            <td class="order-price1">
                                                <p>房价：￥${orderAndHotel.hotel.hotelPrice}</p>
                                                <p>入住天数：2</p>
                                                <script>

                                                </script>
                                                <p>已优惠：￥0.00</p>
                                                <p>实 付：￥${orderAndHotel.hotel.hotelPrice*2}</p>
                                            </td>
                                            <td class="order-time1">
                                                <p>入住时间：</p>
                                                <p><fmt:formatDate value="${orderAndHotel.myorder.orderStartDate}" pattern="yyyy-MM-dd"/></p>
                                                <p>退房时间：</p>
                                                <p><fmt:formatDate value="${orderAndHotel.myorder.orderEndDate}" pattern="yyyy-MM-dd"/></p>
                                            </td>
                                            <td class="order-state1">
                                                <p>已付款</p>
                                                <p>【待入住】</p>
                                            </td>
                                            <td class="order-teleno1">${orderAndHotel.myorder.hotelTelno}</td>
                                            <td class="order-opera1">
                                                <p><a href="">再次订房>></a> </p>
                                            </td>
                                        </tr>
                                    </c:if>
                                </c:forEach>
                            </div>
                        </table>
                    </div>
                </div>
            </div>
    </div>
</div>
</body>
</html>